Cards 卡片

卡片是一個展示單個主題資訊的介面元件:
- 卡片可以放置各種相關內容
- 卡片內可以包含圖片、標題、文字說明、按鈕和列表等內容
- 卡片還可以包含其他介面元素
- 卡片的尺寸會根據內容自動調整,排版方式靈活
Elevated card 浮起卡片

Elevated card color 浮起卡片顏色

Elevated card states 浮起卡片狀態
不同的狀態用於傳達元件的互動反饋。示例展示了浮起卡片在不同互動狀態下的樣式,包括:

填充卡片 Filled card
填充卡片有著純色背景,主要用來突出顯示重要內容。

填充卡片狀態(Filled card states)

Outlined card 描邊卡片
描邊卡片只有一個簡單的邊框,沒有背景顏色。這種設計讓頁面看起來更加輕巧,主要用來顯示次要內容或補充資訊。

Outlined card states 描邊卡片狀態


| 屬性(Attribute) | 值(Value) |
| 形狀(Shape) | 12dp 圓角半徑 |
| 左/右邊距(Left/right padding) | 16dp |
| 卡片間距(Padding between cards) | 最大 8dp |
| 文字對齊方式(Label text alignment) | 左對齊(Start-aligned) |